<template>
<div>
    <div>

    </div>
    <div class="shop_top">
      <!-- //状态查询下拉框 -->
      <el-select v-model="shopStat1" placeholder="请选择" style="position: absolute;left: 0px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-input placeholder="根据模糊查询" v-model="likeName" style="width: 400px; position: absolute; left: 200px;"></el-input>
      <el-button style="position: absolute;left: 650px;" @click="findshopby"  >查询</el-button>
      <el-button style="position: absolute;left: 720px;" @click="addshop"  >新增</el-button>
      <el-button style="position: absolute;left: 800px;" @click="deleshop">删除</el-button>
    </div>

    <div id="" class="table1">
      <el-table :data="warehouses"
      :row-class-name="tableRowClassName"
       @selection-change="handleSelectionChange">
        <!-- 表格中多选框组件 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="whCode" label="仓库编号" width="140">
        </el-table-column>
        <el-table-column prop="whName" label="仓库名称" width="120">
        </el-table-column>
        <el-table-column prop="contact" label="负责人" width="120">
        </el-table-column>
        <el-table-column prop="phoneNo" label="联系方式" width="120">
        </el-table-column>
        <el-table-column prop="address" label="仓库地址" width="120">
        </el-table-column>
        <el-table-column prop="shopName" label="关联门店" width="120">
        </el-table-column>
        <el-table-column prop="shopStat" :formatter="IsKill" label="仓库状态状态" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="updateshop(scope.row)" type="text" size="small">修改门店信息</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- //分页插件 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="pages.current" :page-size="pages.size" layout="total, prev, pager, next"
        :total="pages.total">
      </el-pagination>
      <!-- 修改店铺弹框 -->
      <el-dialog title="修改门店" :visible.sync="updateShopFormVisible" @close="warClose">
             <el-form  label-width="80px">
               <el-form-item label="门店编号">
               	<el-input v-model="warehouse.whCode" disabled="disabled"></el-input>
               </el-form-item>
           		<el-form-item label="门店名称">
           			<el-input v-model="warehouse.whName"></el-input>
           		</el-form-item>
           		<el-form-item label="负责人">
           			<el-input v-model="warehouse.contact"></el-input>
           		</el-form-item>
               <el-form-item label="联系方式">
               	<el-input v-model="warehouse.phoneNo"></el-input>
               </el-form-item>
               <el-form-item label="地址">
               	<el-input v-model="warehouse.address"></el-input>
               </el-form-item>
               <el-form-item label="关联的门店">
               	<el-input v-model="warehouse.shopName" disabled="disabled"></el-input>
               </el-form-item>
               <el-form-item label="状态">
               	<template>
               	  <el-radio v-model="warehouse.whStat" label="1">启用</el-radio>
               	  <el-radio v-model="warehouse.whStat" label="0">禁用</el-radio>
               	</template>
               </el-form-item>
              </el-form>
             <div slot="footer" class="dialog-footer">
               <el-button @click="updateShopFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="updateWarOK">保存</el-button>
             </div>
           </el-dialog>

           <!-- 新增仓库 弹框-->
           <el-dialog title="新增仓库" :visible.sync="addShopFormVisible" @close="warClose">
                  <el-form  label-width="80px">

                		<el-form-item label="仓库名称">
                			<el-input placeholder="名字长度不小于2" v-model="warehouse.whName"></el-input>
                		</el-form-item>
                		<el-form-item label="负责人">
                			<el-input v-model="warehouse.contact"></el-input>
                		</el-form-item>
                    <el-form-item label="联系方式">
                    	<el-input  placeholder="电话长度10到13位数" v-model="warehouse.phoneNo"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                    	<el-input placeholder="地址长度不小于4" v-model="warehouse.address"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                    	<template>
                    	  <el-radio v-model="warehouse.whStat" label="1">启用</el-radio>
                    	  <el-radio v-model="warehouse.whStat" label="0">禁用</el-radio>
                    	</template>
                    </el-form-item>


                   </el-form>
                  <!-- 左右选择框 -->
                    <el-checkbox-group v-model="Chankwarehouse" >
                      <el-checkbox v-for="item in shop" :label="item.shopCode">{{item.shopName}}</el-checkbox>
                    </el-checkbox-group>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="addShopFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addshopOk">添加</el-button>
                  </div>
                </el-dialog>
    </div>


  </div>
</template>

<script>
  export default{
  name: 'warehouse',
  data() {
    return {
      options: [{
        value: '',
        label: '全部'
      }, {
        value: '1',
        label: '启用'
      }, {
        value: '0',
        label: '未启用',
      }],
      likeName:"",
      shopStat1: '',
      warehouses: [],
      warehouse: {
        whCode: "",
        whName: "",
        contact: "",
        phoneNo: "",
        address: "",
        whStat: "",
        shopName: "",
      },
      current: "",
      size: "",
      pages: null,
      multipleSelection:[],
      updateShopFormVisible:false,
      findWarStore:{},
      addShopFormVisible:false,
      shop:[],
      Chankwarehouse:[],
    }
  },
  methods: {

    //新增店铺
    addshopOk(){
          this.$http.post("/pawnWarehouse/addwh",{
            whName:this.warehouse.whName,
            contact:this.warehouse.contact,
            phoneNo:this.warehouse.phoneNo,
            address:this.warehouse.address,
            whStat:this.warehouse.whStat,
            shopCode:this.Chankwarehouse
          }).then(resp=>{
            alert(resp.data.message)
            this.addShopFormVisible=false;
            location.reload();
          })
       this.addShopFormVisible=false;
    },
    addshop(){
      this.$http.get("/pawnShop/getAllshop").then(resp=>{
        this.shop=resp.data.data

      })
     this.addShopFormVisible=true;
    },
    // 修改店铺信息
    updateshop(warehouse){
      this.warehouse=warehouse
      this.updateShopFormVisible=true;
    },

    warClose(){
       this.updateShopFormVisible=false;
        this.addShopFormVisible=false;
    },
    updateWarOK(){
      this.$http.post("/pawnWarehouse/updateWh",{warehouseform :this.warehouse}).then(resp=>{
        this.warehouse={};
        this.updateShopFormVisible=false;
        alert(resp.data.message);

      })
    },
    getAllshops(current, size) {
      this.$http.get("/pawnWarehouse/getAllwhpage", {
        params: {
          current: current,
          size: size
        }
      }).then(resp => {
        this.warehouses = resp.data.data.records
        this.pages = resp.data.data
        this.current = resp.data.data.current
        this.size = resp.data.data.size
        // this.whName = resp
      })
    },
    // 多选框选择赋值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    findshopby(){
      this.findshopbylike(1,1)
    },
    // 删除店铺
    deleshop(){
        this.$http.post("/pawnWarehouse/delWhById",{listWh:this.multipleSelection}).then(resp=>{
          alert(resp.data.message)
          location.reload();
        })
    },
    // 模糊查询店铺
    findshopbylike(current,size){
      this.$http.get("/pawnWarehouse/getWhByLike",{
        params: {
          current:current,
          size: size,
          shopStat:this.shopStat1,
          likeName:this.likeName
        }
      }).then(resp=>{
        console.log(resp)
        this.warehouses = resp.data.data.records
        this.pages = resp.data.data
        this.current = resp.data.data.current
        this.size = resp.data.data.size
        // this.whName = resp
      })
    },

    tableRowClassName({
      row,
      rowIndex
    }) {
      if (row.whStat == 0) {
        return 'warning-row'
      }
    },
    IsKill(row, column) {
      if (row.whStat == 1) {
        return "启用"
      } else {
        return "停用"
      }
    },
    // 分页方法
    handleSizeChange(size) {
      if(this.likeName==""&&this.shopStat1==""){
         this.getAllshops(this.current, size)
      }else{
         this.findshopbylike(this.current, size);
      }
    },
    handleCurrentChange(current) {
      if(this.likeName==""&&this.shopStat1==""){
         this.getAllshops(current, this.size)
      }else{
           this.findshopbylike(current,this.size);
      }
    },
  },
  created() {
    this.getAllshops(1, 1);
  },
  watch:{
    'shopStat1':function(){
       this.findshopbylike(1,1);
    },
    'likeName':function(){
       this.findshopbylike(1,1);
    }
  }
    }
</script>

<style>
  .el-table .warning-row {
    background: yellow;
  }

  .shop_top {
    position: absolute;
    height: 50px;
    width: 1030px;
    left: 150px;
    top:0px;
    background-color: skyblue;
  }

  .table1 {
    position: absolute;
    top: 50px;
    left: 150px;
  }
</style>
